<template>
    <div class="ma-content-block lg:flex justify-between">
      <sa-table ref="crudRef" :options="options" :columns="columns" :searchForm="searchForm">
      </sa-table>
      <!-- 编辑表单 -->
      <edit-form ref="editRef" @success="refresh" />
      <sa-operation @ok="refresh" :id="operation.id" @cancel="operation.visible=false" :visible="operation.visible" :api="operation.api" :data="operation.data"></sa-operation>
    </div>
  </template>
  
  <script setup>
  import { onMounted, ref, reactive, computed } from 'vue'
  import systemApi from '@/api/system/system'
  import { Message } from '@arco-design/web-vue'
  import SaTable from '@cps/sa-table/index.vue'
  import SaOperation from '@cps/sa-operation/index.vue'
  import { throttle } from 'lodash';
  import { useRouter } from 'vue-router';
  import EditForm from './edit.vue'
  const router =useRouter()
  const crudRef = ref()
  const editRef = ref()
  const operation=ref({
    visible:false,
    id:'',
    api:systemApi.deleteRole,
    // data:{}
  })
  const searchForm = ref({
   
  })
  const options = reactive({
    api: systemApi.getRoleList,//表格数据接口
    operationColumnWidth: 200,//操作欄
    showSearch:false,
    columnAlign: 'center',
    pageSimple: false,//是否展示操作欄有 以及工具欄
    isTreeTable:false,
    add: {//頂部新增按鈕
      show: true,
      auth: ['/core/menu/save'],
      func: async () => {
        editRef.value?.open()
      },
    },
    edit: {//操作欄编辑按鈕
      show: true,
      auth: ['/core/menu/update'],
      func: async (record) => {
        editRef.value?.open('edit',record)
        editRef.value?.setFormData(record)
      },
    },
    delete: {//操作欄和頂部刪除按鈕
      show: true,
      auth: ['/core/menu/destroy'],
      func: (params) => {
        operation.value.id=params.ids[0]
        operation.value.visible=true
      }
    },
    isExpand: false,//展開所有子樹
  })
  
  const columns = reactive([
    { title: 'ID', dataIndex: 'id', width: 100 },
    { title: '角色组', dataIndex: 'name', width: 180 },
    { title: '所属于管理员', dataIndex: 'admin_name', width: 100 },
    { title: '创建时间', dataIndex: 'create_time', width: 180 },
    { title: '修改时间', dataIndex: 'update_time', width: 180 },
  ])
  
  const initPage = async () => { 
    
  }
  const refresh = async () => {
    crudRef.value?.refresh()
  }
  
  
  
  onMounted(async () => {
    initPage()
    refresh()
  })
  </script>
  
  <style scoped>
  .icon {
    width: 1em;
  }
  </style>
  